<template>
	<view class="container">
		<view class="total">
			<text class="uni-h5 uni-text-gray">币币总资产折合 (BTC)</text>
			<view class="uni-flex uni-row">
				<text class="flex-item uni-h4">0.011121</text>
				<text class="flex-item uni-h5 uni-text-gray uni-common-pl">≈365215 CNY</text>
				<button class="flex-item mini-btn" plain type="primary" size="mini" @tap="goBuyCoin">买币</button>
			</view>
		</view>
		<view class="uni-gap"></view>
		<view class="header uni-divider">
			<view class="l">
				<checkbox class="checkbox" value="true" checked="false" /><text class="uni-h5">隐藏小额币种</text></view>
			<view class="r"></view>
		</view>
		<view class="list">
			<view class="item uni-divider" v-for="asset in assets" :key="asset.coin">
				<view class="title">
					<view class="n uni-h4">{{asset.coin}}</view>
					<view class="g uni-h5 uni-text-gray"><text class="uni-icon uni-icon-arrowright"></text></view>
				</view>
				<block>
					<view class="thead">
						<view class="l uni-text-gray">可用</view>
						<view class="c uni-text-gray">冻结</view>
						<view class="r uni-text-gray">折合(CNY)</view>
					</view>
					<view class="thead">
						<view class="l">{{asset.available}}</view>
						<view class="c">{{asset.freeze}}</view>
						<view class="r">{{asset.available*100}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	import network from '../../common/network.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				assets: []
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#0952c3',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		mounted() {},
		onLoad() {
			console.log("onLoad");
			// if (this.hasLogin) {
			// 	console.log("load assets");
			// 	this.assets = [];
			// 	this.fetchData(this.user.id)
			// }
		},
		onTabItemTap() {
			console.log("onTabItemTap");
		},
		onShow() {
			console.log("onShow");
			if (this.hasLogin) {
				console.log("load assets");
				this.assets = [];
				this.fetchData(this.user.id)
			}
		},
		computed: {
			...mapState(['hasLogin', 'user'])
		},
		methods: {
			fetchData(uid) {
				const self = this;
				// 查询资产
				network.requestJsonRpc("/jsonrpc/", 'POST', {
						"id": 1,
						"method": "balance.query",
						"params": [uid]
					},
					function(res) {
						//console.log("查询成功后:" + JSON.stringify(res));

						for (var key in res) {
							res[key]["coin"] = key;
							self.assets.push(res[key]);
						}

						//console.log("self.assets:" + JSON.stringify(self.assets));
					});
			},
			goBuyCoin() {
				uni.navigateTo({
					url: '/pages/ucenter/recharge/main?to=3'
				})
			}
		}
	}
</script>
<style scoped>
	.container .total {
		padding: 20upx 20upx 0 20upx;
	}

	.container .header {
		display: flex;
		padding: 0 20upx 20upx 20upx;
	}

	.container .header .l .checkbox {
		zoom: 60%;
		vertical-align: middle;
	}

	.container .list .item .title {
		display: flex;
		padding: 20upx 20upx;
	}

	.container .list .item .title .n {
		width: 50%;
		color: #0952c3;
	}

	.container .list .item .title .g {
		width: 50%;
		text-align: right;
	}

	.container .list .item .thead {
		display: flex;
		padding: 0 20upx 10upx 20upx;
	}

	.container .list .item .thead .l {
		width: 35%;
	}

	.container .list .item .thead .c {
		width: 35%;
	}

	.container .list .item .thead .r {
		width: 30%;
		text-align: right;
	}
</style>
